<template>
  <div id="app">
    <TwiceShop v-if="storeA && storeB" :date="date" :storeA="storeA" :storeB="storeB"></TwiceShop>
    <SingleShop v-else :fromDate="fromDate" :toDate="toDate" :storeCode="storeA" :brandCode="brandCode"></SingleShop>
  </div>
</template>

<script>
  import SingleShop from './components/SingleShop.vue'
  import TwiceShop from './components/TwiceShop.vue'

  function getUrlByKey(url, key) { //url为要链接字符串，key为要寻找的名称
    let value = false; //定义变量存储找到的值，默认为false
    if (url.split("?").length > 1) { //链接有带参数，没有者忽略
      if (url.split("?")[1].split("&").length > 1) { //有多个参数
        for (let i in url.split("?")[1].split("&")) { //遍历寻找是否有等于实参'key'的
          if (url.split("?")[1].split("&")[i].split("=")[0] === key) { //找到的话将值赋给value，没有则忽略
            value = url.split("?")[1].split("&")[i].split("=")[1];
          }
        }
      } else { //链接只带一个参数
        if (url.split("?")[1].split("=")[0] === key) { //判断这个参数名是否等于我们要找的key
          value = url.split("?")[1].split("=")[1]
        }
      }
    }
    return value;
  }

  export default {
    name: 'App',
    components: {
      TwiceShop,
      SingleShop
    },
    data() {
      return {
        storeA: null,
        storeB: null,
        date: null,
        fromDate: null,
        toDate: null,
        brandCode: null
      }
    },
    created() {
      let url = window.location.search

      let storeCode = getUrlByKey(url, 'storeCode')
      if (!storeCode) {
        alert('参数错误！')
        return
      }
      let storeArr = storeCode.split(',');
      this.storeA = storeArr[0];
      this.storeB = storeArr[1] ? storeArr[1] : null

      // let date = getUrlByKey(url, 'date')
      // this.date = date ? date : new Date().getTime()
      this.fromDate = getUrlByKey(url, 'fromDate')
      this.toDate = getUrlByKey(url, 'toDate')
      this.brandCode = getUrlByKey(url, 'brandCode')

      console.log('global', this.storeA, this.storeB, this.fromDate, this.toDate, this.brandCode)
    }
  }
</script>

<style lang="scss">
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 20px;
  }
</style>